import React from 'react'
import {Tooltip} from 'antd'
import {ExclamationCircleOutlined,SoundOutlined}  from '@ant-design/icons'
import styles from './../index.less'

export default function SquerHead(props) {
    let headData = props.data
    let tip = '【毛利及以上】含线下直营/加盟零售，含线上B2C、B2B和视同销售的批发，取自线下发货时间，线上R3订单支付时间和唯品罗盘API接口下单时间，退款关联订单近45天滚动变化；另，线上订单线下发货的O2O业绩不双算，默认归在订单成交店铺 ，自2022年3月1日起含唯品补贴优惠劵，自2022年6月1日起含天猫超市销售数据；自2022年11月1日起含拼多多优惠券等销售数据；但暂不含Glemall和Aiken授权业务、JC唯品会、MOP唯品会、代运营keep、迪士尼及及非电商R3系统的数据；（KPI考核时会再手工补充） 其中，成本计算：取零售财经按月导入的实际采购成本单价或R3中O2O发货仓款按不含税收入*86%反算，或找不到单价时默认按品牌折率计算；\n' +
    '【零售费用】含全域下直接归属的运营、中后台、财务三大费用项，并下设三级，取自店长/系统预估，线上和线下两套SAP，及财策手工调整（详细费用逻辑可咨询财经策略部BP），漏斗可下钻查看费用详情\n' +
    '（1）按对象化费用归集，暂不进行费用分摊，即费用能到什么层级就对应到什么层级，当前归属为六层：零售事业部/品牌/运营模式/一级渠道/二级渠道/店铺； 其中，电商-物流费用及物流仓储费为U币口径，由财策每月手工导入；\n' +
    '（2）未结账月及之后日期的不同费用项分别按照一定逻辑进行店长/系统预估，仅供参考，财务结账后按SAP入账期间更新为实际费用；\n' +
    '\n' +
    '【注意】经营：点击经营漏斗中核心经营指标可下钻到二级详情页'
  return (
    <div className={styles.head}>
         <div className={styles.leftHead}>
           <div className={styles.headName}>{headData.tip}</div>
           {
             headData.remarkTipIcon?(<div className={styles.headNamef}>{headData.remarkTip}</div>):('')
            }
           <Tooltip title={headData.mainTipIcon?headData.tip:headData.remarkTip?headData.remarkTip:''} color='#fff'>
             <ExclamationCircleOutlined className={headData.mainTipIcon?'':headData.remarkTip?styles.headIcon:''}/>
           </Tooltip>
         </div>
         <div className={styles.rightHead}>
           <div className={styles.tip}>{headData.remark}</div>
           <div className={styles.tipf}><SoundOutlined className={styles.tipIcon}/>{headData.upDateRemark}</div>
         </div>

       </div>
  )
}
